<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7-基础选择器</title>
    <style>
        /* 1.标签选择器 */
        h3{
            color: red;
        }
        p{
            color: blue;
        }
        em{
            color: orange;
        }
        i{
            color: pink;
        }
        /* 类选择器 */
        .kill{
            color: blue;
            font-size: 30px;
        }
        .xnormal{
            font-weight: bold;
        }
        /* id选择器 */
        #navbar1{
            color: blue;
            font-weight: bold;
        }
        #navbar2{
            color: blue;
            font-weight: bold;
        }
        .box{
            height: 100px;
            background:red;
        }
        /* 通配符选择器 */
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
    <!-- 
        css设置的方式 3种
        基础选择器是干什么的? 抓元素/标签的
     -->
    <!-- 1.标签选择器 -->
    <h3>从郑和下西洋到劈波斩浪中国舰</h3>
    <h3>劈波斩浪中国舰</h3>
    <h3>西洋到劈波斩浪</h3>
    <p>七下西洋</p>
    <em>向海图强！</em>
    <i>看中国海军舰艇如何命名</i>
    <hr>
    <!-- 
        2.类选择器:
            1) class="类名1 类名2 类名3..."  定义多个
            2) 类名不能以数字或中划线开头
            3) 类名可以重复 ，多个标签可以使用同一个类名
    -->
    <div class="kill xnormal">
        韩统一教称枪杀安倍嫌犯之母是信徒
    </div>

    <footer class="xnormal">
        一名在日本东京的代表表示
    </footer>
    <hr>
    <!-- 
        3.ID选择器
            1) id ='选择器名称'
            2) id是唯一的，一个页面[推荐]使用一个id命名即可
            3) 优先选择class类定义方式，id后面配合JS使用
     -->
    <nav id="navbar1">六方面举措促进餐饮业恢复发展</nav>
    <aside id="navbar2">餐饮业恢复发展</aside>
    <hr>
    <!-- 
        select * from cc_user\G;
        4.通配符选择器 *
        *{
            margin:0;
            padding:0;
        }
        块元素：div,footer,nav,aside
     -->
    <div class="box"></div>
</body>
</html>